<template>
  <div>
    <a-modal
      :visible="visible"
      title="选择负责人"
      cancelText="取消"
      okText="提交"
      width="60%"
      @ok="submit"
      @cancel="cancel"
    >
      <div>
        <a-transfer
          class="tree-transfer"
          :data-source="dataSource"
          :target-keys="targetKeys"
          :render="item => item.title"
          :show-select-all="false"
          @change="onChange"
        >
          <template #children="{ direction, selectedKeys, onItemSelect }">
            <a-tree
              v-if="direction === 'left'"
              blockNode
              checkable
              checkStrictly
              defaultExpandAll
              :checkedKeys="[...selectedKeys, ...targetKeys]"
              :treeData="treeData"
              @check="
            (_, props) => {
              onChecked(_, props, [...selectedKeys, ...targetKeys], onItemSelect);
            }
          "
              @select="
            (_, props) => {
              onChecked(_, props, [...selectedKeys, ...targetKeys], onItemSelect);
            }
          "
            />
          </template>
        </a-transfer>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {reactive, computed, defineComponent, ref} from "vue";

export default {
  name: "charge",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, content) {
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      tData: [
        {
          key: '0-0',
          title: '0-0',
        },
        {
          key: '0-1',
          title: '0-1',
          children: [
            {
              key: '0-1-0',
              title: '0-1-0',
            },
            {
              key: '0-1-1',
              title: '0-1-1',
            },
          ],
        },
        {
          key: '0-2',
          title: '0-3',
        },
      ]
    })

    const cancel = () => {
      content.emit("close", "chargeVisible");
    }

    const targetKeys = ref([]);
    const dataSource = ref(transferDataSource);
    const treeData = computed(() => {
      return handleTreeData(state.tData, targetKeys.value);
    });

    const onChange = keys => {
      targetKeys.value = keys;
    };

    const onChecked = (_, e, checkedKeys, onItemSelect) => {
      const { eventKey } = e.node;
      onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
    };

    const transferDataSource = [];

    const flatten = (list = []) => {
      list.forEach(item => {
        transferDataSource.push(item);
        flatten(item.children);
      });
    }

    flatten(JSON.parse(JSON.stringify(state.tData)));

    const isChecked = (selectedKeys, eventKey) => {
      return selectedKeys.indexOf(eventKey) !== -1;
    }

    const handleTreeData = (data, targetKeys = []) => {
      data.forEach(item => {
        item['disabled'] = targetKeys.includes(item.key);

        if (item.children) {
          handleTreeData(item.children, targetKeys);
        }
      });
      return data;
    }

    return {
      state,
      cancel,
      targetKeys,
      dataSource,
      treeData,
      onChange,
      onChecked,
    }
  }
}
</script>

<style scoped>
.tree-transfer .ant-transfer-list:first-child {
  width: 50%;
  flex: none;
}
</style>
